<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>父组件向子组件传值</title>  
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>  
</head>  
<body>  
  
<div id="app">  
  <div>  
    <!-- 父组件中的输入框 -->  
    <input type="text" v-model="parentValue">  
  </div>  
  <div>  
    <!-- 父组件向子组件传递值 -->  
    <child-component :child-value="parentValue"></child-component>  
  </div>  
</div>  
  
<script>  
// 定义子组件  
Vue.component('child-component', {  
  props: ['childValue'],  
  template: `  
    <div>  
      <p>传递的值是: {{ childValue }}</p>  
    </div>  
  `  
});  
  
// 初始化Vue实例  
new Vue({  
  el: '#app',  
  data: {  
    // 父组件的数据属性  
    parentValue: ''  
  }  
});  
</script>  
  
</body>  
</html>